<template>
  <div>
      <div style="width: 100%;height:600px;">
          <rm-layout-top splitcolor="#FFFFFF" :splitwidth=5 :fixsize=110>
              <template v-slot:fix>
                  <table style="width: 100%">
                      <tr>
                          <td style="width: 60px; text-align: left">标本日期</td>
                          <td style="width: 140px">
                              <el-date-picker v-model="sampledate1" :clearable="false" style="width: 100%"></el-date-picker>
                          </td>
                          <td style="width: 30px; text-align: center;">至</td>
                          <td style="width: 150px">
                              <el-date-picker v-model="sampledate2" :clearable="false" style="width: 100%"></el-date-picker>
                          </td>
                          <td style="width: 60px; text-align: left">病人来源</td>
                          <td>
                              <el-select v-model="pattype" @dblclick.native="popMultipleChk(pattype, 'pattype', pattypeOption, '病人类型选择')" filterable clearable style="width: 200px">
                                  <el-option v-for="(item, index) in pattypeOption" :value="item.data" :label="item.display" :key="index"></el-option>
                              </el-select>
                          </td>
                      </tr>
                      <tr>
                          <td style="width: 60px; text-align: left">标本号</td>
                          <td colspan="3">
                              <el-input v-model="sampleno" style="width: 100%" placeholder="标本号可以输入如：1,2,5-8等格式"></el-input>
                          </td>
                          <td>
                              <el-checkbox v-model="beforecheck" false-label="0" true-label="1">审核前</el-checkbox>
                          </td>
                          <td>
                              <el-checkbox v-model="aftercheck" false-label="0" true-label="1">审核后</el-checkbox>
                          </td>
                      </tr>
                      <tr>
                          <td style="width: 60px; text-align: left">报告项目</td>
                          <td colspan="3">
                              <rm-ddl-rptitem prgno="LIS310" v-model="rptitemcode" :rptunitid="rptunitid" @change="QrptitemChange" width="100%" ref="rptiteminput"></rm-ddl-rptitem>
                          </td>
                          <td colspan="2">
                              <el-checkbox v-model="emerflag" false-label="0" true-label="1">仅显示加急标本</el-checkbox>
                          </td>
                      </tr>
                      <tr>
                          <td colspan="5">
                              <span>已选中/总数：</span>
                              <span style="font-size:18px;font-weight: bold;">{{selectNum}}/{{totalNum}}</span>
                          </td>
                          <td style="text-align: right">
                              <el-button @click="QueryExportData()">查询</el-button>
                              <el-button @click="ExportFile()">导出</el-button>
                              <el-button @click="ExportCancel()">退出</el-button>
                          </td>
                      </tr>
                  </table>
              </template>
              <div style="width: 100%">
                  <div style="height: 435px;">
                      <el-tabs style="height: 100%" type="border-card" v-model="tab_showflag" @tab-click="handleTabClick">
                          <el-tab-pane label="数据" name="tab_data">
                              <div style="width: 100%;height:400px;">
                                  <vxe-table ref="xTable" :data="tableData" :loading="loading" :keyboard-config="keyConfig" :sort-config="{ trigger: 'cell' }" :select-config="{ checkAll: true, checkMethod: checkMethod }" border fit height="auto" header-align="center" resizable show-overflow="title" size="mini" stripe highlight-current-row @select-change="handlechange" @select-all="handleallchange">
                                      <vxe-table-column type="selection" width="45" align="center"></vxe-table-column>
                                      <vxe-table-column field="sampledate" title="样本日期" width="80px" align="center" :formatter="['toDateString', 'yyyy-MM-dd']" sortable></vxe-table-column>
                                      <vxe-table-column field="pat_typename" title="类型" width="60px" align="center" sortable></vxe-table-column>
                                      <vxe-table-column field="emer_flag" title="急" width="20px" align="center" sortable>
                                          <template v-slot="{ row }">
                                              <span v-if="row.emer_flag == '1'" style="color:red;">急</span>
                                              <span v-else></span>
                                          </template>
                                      </vxe-table-column>
                                      <vxe-table-column field="sampleno" title="样本号" width="60px" align="center" sortable></vxe-table-column>
                                      <vxe-table-column field="pat_name" title="姓名" width="100px" sortable></vxe-table-column>
                                      <vxe-table-column field="pat_no" title="病人号" width="100px" sortable></vxe-table-column>
                                      <vxe-table-column field="result_num" title="数值结果" width="100px" sortable></vxe-table-column>
                                      <vxe-table-column field="result_str" title="文字结果" width="100px" sortable></vxe-table-column>
                                      <vxe-table-column field="result_flag" title="结果标志" width="60px" align="center" sortable></vxe-table-column>
                                  </vxe-table>
                              </div>
                          </el-tab-pane>
                          <el-tab-pane label="图形" name="tab_chart">
                              <div style="width:720px">
                                  <div id="dialogLinkChart" style="width: 100%;height:400px;vertical-align:center;"></div>
                              </div>
                          </el-tab-pane>
                      </el-tabs>
                  </div>
                  <div style="height: 50px;">
                      <table style="width:100%;font-size:20px;padding-top:10px;">
                          <tr>
                              <td>均值：<span style="color:#5043c9">{{ meanval }}</span></td>
                              <td>标准差：<span style="color:#0abb28">{{ stddeviation }}</span></td>
                              <td>CV%：<span style="color:#e2960a">{{ cvpercent }}</span></td>
                          </tr>
                      </table>
                  </div>
              </div>
          </rm-layout-top>
      </div>
      <!--多选弹窗--->
      <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="dlgTitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
          <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"> </rm-SqlMultiple>
      </el-dialog>
  </div>
</template>
<script>
import echarts from "echarts";
import XE from "xe-utils";
export default {
  props: ["exportrptitem", "exportrptitemname", "rptunitid", "rpattypeOption", "sampledate"],
  data() {
      return {
          sampledate1: this.sampledate,
          sampledate2: this.$pub.InitDateTime2(0).dateto,
          sampleno: "",
          pattype: "",
          beforecheck: "1",
          aftercheck: "1",
          rptitemcode: this.exportrptitem,
          rptitemname: this.exportrptitemname,
          emerflag: "0",
          itemOptions: [],
          pattypeOption: this.rpattypeOption,
          tab_showflag: "tab_data",
          //项目结果输出弹窗
          tableData: [],
          loading: false,
          keyConfig: {
              isArrow: true,
              isDel: true,
              isTab: true,
              isEdit: true,
          },
          selectNum: 0,
          totalNum: 0,
          meanval: 0,
          stddeviation: 0,
          cvpercent: 0,
          dialogMultipleVisible: false,
          dlgTitle: "",
          option1: [],
          option2: [],
          fieldname: "",
          chartdata: [],
      };
  },
  created() {
  },
  methods: {
      QueryExportData() {
          this.tab_showflag = "tab_data";
          if (!this.rptitemcode) {
              this.$alert("请选择一个报告项目！", "提示").then(()=> {
                  this.$refs.rptiteminput.$refs.ddlrptitemSelect.focus();
              });
              return;
          }
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS310",
                  method: "post",
                  data: {
                      action: "queryexportdata",
                      sampledate1: this.sampledate1,
                      sampledate2: this.sampledate2,
                      sampleno: this.sampleno,
                      pattype: this.pattype,
                      beforecheck: this.beforecheck,
                      aftercheck: this.aftercheck,
                      rptitemcode: this.rptitemcode,
                      emerflag: this.emerflag,
                  }
              })
              .then(res => {
                  this.tableData = res.Data;
                  if(this.tableData.length > 0) {
                      this.totalNum = this.tableData.length;
                      let numarr = [];
                      this.tableData.forEach((item)=>{
                          if(item.result_num) numarr.push(item.result_num);
                      });
                      this.calcnum(numarr);
                  }
              });
      },
      calcnum(numarr) {
          this.chartdata = numarr;
          if (numarr.length > 0) {
              //计算平均值
              this.meanval = XE.mean(numarr).toFixed(2);
              //计算个数
              this.selectNum = numarr.length;
              //计算标准差SD
              var temparr = []; //用来存储每个数组元素与平均值的差的平方。
              for (var i = 0; i < this.selectNum; i++) {
                  var dev = parseFloat(numarr[i]) - this.meanval; //计算数组元素与平均值的差
                  temparr[i] = Math.pow(dev, 2); //计算差的平方
              }
              var powSum = 0; //存储差的平方总和
              for (var j = 0; j < temparr.length; j++) {
                  if (temparr[j].toString() != "" || temparr[j].toString() != null) {
                      powSum = parseFloat(powSum) + parseFloat(temparr[j].toString()); //计算差的平方总和
                  }
              }
              this.stddeviation = Math.sqrt(parseFloat(powSum) / parseFloat(this.selectNum)).toFixed(2); //用差的平方总和除以数组长度即可得到标准差
              //计算CV
              if (this.meanval != "") {
                  this.cvpercent = (this.stddeviation / this.meanval).toFixed(4);
              }
          } else {
              this.selectNum = 0;
              this.meanval = 0;
              this.stddeviation = 0;
              this.cvpercent = 0;
          }
      },
      handleTabClick(tab, event) {
          if (tab.name == "tab_chart") {
              this.DrawCharts("dialogLinkChart");
          }
      },
      checkMethod({ row }) {
          if(row.result_num) return true;
          else return false;
      },
      handlechange(event) {
          let numarr = [];
          if(event.selection.length > 0) {
              event.selection.forEach((item)=>{
                  if(item.result_num) numarr.push(item.result_num);
              });
          }
          this.calcnum(numarr);
      },
      handleallchange(event) {
          let numarr = [];
          if(event.selection.length > 0) {
              event.selection.forEach((item)=>{
                  if(item.result_num) numarr.push(item.result_num);
              });
          }
          this.calcnum(numarr);
      },
      QrptitemChange(value, name) {
          this.rptitemcode = value;
          this.rptitemname = name;
          this.QueryExportData();
      },
      ExportFile() {
          let tableColumn = this.$refs.xTable.getColumns();
          let extableColumn = [];
          tableColumn.forEach((item) => {
              extableColumn.push({ title: item.title, field: item.property });
          });
          let filtertxt = this.getExportFilter();
          let filtertitle = "均值："+this.meanval + "; 标准差："+ this.stddeviation + "; 中位数："+ this.cvpercent;
          this.$pub.exportTableExcel(this.$refs.xTable.afterFullData, extableColumn, "LIS310报告处理_"+this.rptitemname+".xlsx", filtertxt,filtertitle);
      },
      getExportFilter() {
          let filtertxt = "标本日期:" + XE.toDateString(this.sampledate1, "yyyy-MM-dd") + "至" + XE.toDateString(this.sampledate2, "yyyy-MM-dd") + "; ";
          if(this.pattype) filtertxt += "病人来源:" + this.getOptionName(this.pattypeOption.filter((item) =>  ("," + this.pattype + ",").indexOf("," + item.data + ",") > -1)) + "; ";
          if(this.sampleno) filtertxt += "标本号:" + this.sampleno + "; ";
          if(this.beforecheck == "1") filtertxt += "审核前; ";
          if(this.aftercheck == "1") filtertxt += "审核后; ";
          if(this.rptitemcode) filtertxt += "报告项目:" + this.rptitemname + "; ";
          if(this.emerflag == "1") filtertxt += "仅显示加急标本; ";
          return filtertxt;
      },
      getOptionName(option) {
          if (option && option.length > 0) {
              let optionname = "";
              option.forEach((item) => {
                  if(item.hasOwnProperty("display")) {
                      optionname += item.display + ",";
                  } else {
                      optionname += item.label + ",";
                  }
              });
              return optionname.substring(0, optionname.length - 1);
          } else {
              return "";
          }
      },
      DrawCharts(chartname) {
          console.log(this.rptitemname);
          //echarts画图
          this.$nextTick(() => {
              this.charts = echarts.init(document.getElementById(chartname));
              this.charts.setOption({
                  title: {
                      text: this.rptitemname,
                      textAlign: "center",
                      x: "center",
                      y: "top"
                  },
                  tooltip: {
                      trigger: "axis"
                  },
                  grid: {
                      left: "3%",
                      right: "4%",
                      bottom: "3%",
                      containLabel: true
                  },
                  xAxis: {
                      name: "",
                      nameLocation: "middle",
                      type: "category",
                      boundaryGap: true,
                      data: this.selectNum,
                      axisLabel: {
                          fontSize: 8
                      }
                  },
                  yAxis: {
                      name: "",
                      nameLocation: "middle",
                      boundaryGap: false,
                      type: "value",
                      axisLabel: {
                          fontSize: 8
                      }
                  },
                  series: [
                      {
                          name: "结果",
                          type: "line",
                          stack: "总量",
                          data: this.chartdata,
                          label: {
                              show: true
                          },
                          markLine: {
                              data: [{
                                  type: 'average',
                                  name: '均值'
                              }],
                              lineStyle: {
                                  color: '#5043c9'
                              }
                          }
                      }
                  ]
              });
          });
      },
      ExportCancel() {
          this.$emit("cancel");
      },
      //多选弹窗
      popMultipleChk(e, fieldname, option, title) {
          let temp = XE.clone(option, true);
          this.option1 = [];
          this.option2 = [];
          if (e != "") {
              let k = e.split(",");
              k.forEach((item) => {
                  let ndata = temp.find((m) => m.data == item);
                  if (ndata != undefined && ndata != null) {
                      this.option2.push(ndata);
                  }
              });
              temp.forEach((item) => {
                  if (k.indexOf(item.data + "") < 0) {
                      this.option1.push(item);
                  }
              });
          } else {
              this.option1 = temp;
          }
          this.fieldname = fieldname;
          this.dlgTitle = title;
          this.dialogMultipleVisible = true;
      },
      closedialog(value, name) {
          if (value != "close") {
              this[name] = value;
          }
          this.dialogMultipleVisible = false;
      },
  },
}
</script>
<style scoped>
</style>